import React, { memo, useContext } from 'react'
import { AsideWrap } from './style'
import { Tree } from 'antd';
const { DirectoryTree } = Tree;
import type { DataNode, DirectoryTreeProps } from 'antd/es/tree';
import { DownOutlined, CheckOutlined } from '@ant-design/icons';
import { Icon } from '@iconify/react';
import { splitContext } from '../SplitContextProvider'

// 树数据
const treeData: DataNode[] = [
    {
        title: 'public',
        key: '0-0',
        children: [
            { title: 'vite.svg', icon: <Icon icon="vscode-icons:file-type-svg" />, key: '0-0-0', isLeaf: true },
            { title: 'logo.png', icon: <Icon icon="vscode-icons:file-type-image" />, key: '0-0-1', isLeaf: true },
        ],
    },
    {
        title: 'src',
        key: '0-1',
        children: [
            {
                title: 'assets',
                key: '0-1-0',
                children: [
                    {
                        title: '404.png', icon: <Icon icon="vscode-icons:file-type-image" />, key: '0-1-0-0', isLeaf: true
                    },
                    {
                        title: 'react.svg', icon: <Icon icon="vscode-icons:file-type-svg" />, key: '0-1-0-1', isLeaf: true
                    },
                ]
            },
            { title: 'components', key: '0-1-1' },
            { title: 'pages', key: '0-1-2' },
            { title: 'router', key: '0-1-3' },
            { title: 'App.tsx', icon: <Icon icon="vscode-icons:file-type-reactjs" />, key: '0-1-4', isLeaf: true },
            { title: 'main.tsx', icon: <Icon icon="vscode-icons:file-type-reactjs" />, key: '0-1-5', isLeaf: true },
        ],
    },
];

const Aside = memo(() => {
    const { addTabItem, treeSeletedKeys, setTreeSeletedKeys } = useContext(splitContext);

    const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
        // console.log('Trigger Select', keys, info);
        setTreeSeletedKeys(keys);
        if (info.node.isLeaf) {
            addTabItem(info.node);
        }
    };

    return (
        <AsideWrap>
            <DirectoryTree
                selectedKeys={treeSeletedKeys}
                showLine={true}
                switcherIcon={<DownOutlined />}
                multiple
                defaultExpandAll
                onSelect={onSelect}
                treeData={treeData}
            />
        </AsideWrap>
    )
})

export default Aside